<script lang="ts" setup>
// #region 引入包, 函数和组件
// import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)

// #endregion

// #region // 变量

// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component :is="Component" :key="$route.name"></component>
      </keep-alive>
    </transition>
  </router-view>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s ease;
}
.fade-enter-active {
  transition-duration: 0.3s;
  transition-delay: 0.1s;
}
.fade-leave-to,
.fade-enter-from {
  transform: translateY(20rem);
  opacity: 0;
}
</style>
